import * as THREE from "three";
export class App {
  constructor() {
    // Grab window properties
    let width = window.innerWidth;
    let height = window.innerHeight;
    let pixelRatio = window.devicePixelRatio;
    let aspect = width / height;
    // Setup three.js
    this.camera = new THREE.PerspectiveCamera(45, aspect, 0.5, 1500);
    this.scene = new THREE.Scene();
    this.renderer = new THREE.WebGLRenderer({ antialias: false });
    this.renderer.setPixelRatio(pixelRatio);
    this.renderer.setSize(width, height);
    let domDiv = document.querySelector(".wrapper");
    domDiv.appendChild(this.renderer.domElement);
    // Catch resize events
    window.onresize = evt => {
      console.log(evt, "这是什么");
      this.resize(window.innerWidth, window.innerHeight);
    };
  }

  /* Resize viewport */
  resize(width, height) {
    this.camera.aspect = width / height;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(width, height);
  }

  /* Start the main loop */
  start() {
    this.loop();
  }

  loop() {
    requestAnimationFrame(() => this.loop());
    let time = new Date().getTime() / 1000;
    let delta = 0.0;
    if (typeof this.lastUpdate !== "undefined") {
      delta = time - this.lastUpdate;
    }
    this.update(delta);
    this.lastUpdate = time;
    this.render();
  }

  update(delta) {
    // Dispatch update event for listeners
    window.dispatchEvent(
      new CustomEvent("app-update", {
        detail: {
          delta: delta
        }
      })
    );
  }

  render() {
    let scene = this.scene;
    let camera = this.camera;
    let renderer = this.renderer;
    renderer.render(scene, camera);
  }
}
